<template>
    <div>
        <!-- 您的余额：{{value}}<button @click="jiaqian">充值</button> -->
        您的余额：{{yue}}<button @click="$emit('jiaqian',yue+100)">充值</button>
        您的性别：{{gender}}<button @click="$emit('update:gender','男')">变装</button>
    </div>
</template>
<script>
    export default {
        // 默认情况下我们会通过value接收数据，会通过input事件修改数据
        // 但是没有语义，我们最好要见名知意，我们可以利用model属性进行设置
        model:{
            prop: 'yue', // 将默认的value修改成了yue
            event: 'jiaqian' // 将默认的input事件修改为了jiaqian事件
        },
        props:{
            // v-model传递的数据默认是通过value这个名字传递给子组件的
            // value:{
            //     type: Number
            // }
            yue:{
                type: Number
            },
            gender:{
                type: String
            }
        },
        methods:{
            jiaqian(){
                // v-model传递数据的同时还会默认添加一个input的自定义事件
                // 通过触发这个input自定义事件可以修改传递过来的数据
                this.$emit('input',this.value + 100)
            }
        }
    }
</script>
<style>

</style>